.principles{
	padding:0px;
	.wrapper{
		width: 100%;
		max-width:100%;
		margin: 0px auto;
	}
	.simpleblocks{
		padding:0px;
		margin-top:30px;
	}
	.simpleblocks .block{
		width: 33.3%;
		height: 546px;
		margin:0px;
		background: #FFF;
		.squarebox{
			@include background-size(cover);
			background-repeat:no-repeat;
			width: 100%;
			height: 273px;
			background: #ccc;
			margin-bottom: 30px;
			border-right: 1px solid white;
		}
		p{
			max-width: 490px;
			padding: 0 10%;
			margin:0 auto;
			color: #66666a;
			font-weight: 300;
		}
	}

	@mixin principles-bg($color, $path){
		background: url($path), $color;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.simpleblocks .choice-matters .squarebox{ @include principles-bg(#67cdd3, "../img/principles/choicematters.jpg"); }
	.simpleblocks .digital-meets-physical .squarebox{ @include principles-bg(#f3c400, "../img/principles/digitalmeetsphysical.jpg"); }
	.simpleblocks .brought-to-you-by-google .squarebox{ @include principles-bg(#a4c439, "../img/principles/broughttoyoubygoogle.jpg"); }
	.simpleblocks .live-wallpapers .squarebox{ @include principles-bg(#bcf7e2, "../img/principles/livewallpapers.jpg"); background-size: cover;}
	.simpleblocks .different-finishes .squarebox{ @include principles-bg(#e53e4e, "../img/principles/differentfinishes.jpg"); }
	.simpleblocks .opportunity-platform .squarebox{ @include principles-bg(#aa69d1, "../img/principles/opportunityplatform.jpg"); }

	@include breakpoint(both) { 
        .simpleblocks .block {
            width: 50%;
        }
    }

    @media all and (max-width: 715px) { 
    	.simpleblocks .block{
    		height: 600px;
    	}
    	p{
    		font-size: 0.8em;
    	}
    }

    @media all and (max-width: 550px) { 
    	.simpleblocks .block{
    		width:100%;
    		height: auto;
			padding-bottom: 50px;
    	}

    }

    
}